<template>
    <div>
        <div class="top">
            <el-input v-model="dataSource.data" placeholder="请输入部门" clearable
                style="width:200px;height: 28px;line-height: 28px;margin-right: 20px;" />
            <el-button type="primary" size="small" @click="inquire">查询</el-button>
            <el-button type="success" size="small" @click="add">添加</el-button>
        </div>
        <div class="custom-tree-container">
            <el-tree :data="dataSource.list" :props="defaultProps" default-expand-all node-key="id"
                :filter-node-method=tree
                ref="trees"
                >
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{ node.label }}</span>
                    </span>
                    <span class="coustom-tree-button">
                        <el-button type="success" size="small" @click="addchild(data)">添加子部门</el-button>
                        <el-button type="primary" size="small" @click="emitadd(data)">修改</el-button>
                        <el-button type="danger" size="small" @click="dele(data)">删除</el-button>
                    </span>
                </template>
            </el-tree>
        </div>
</div>
</template>

<script setup lang="ts">



import { onMounted } from 'vue';
import http from '../../api/setting'
import { ref, reactive,watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox,ElTree  } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { da } from 'element-plus/es/locale';
const router = useRouter()
let id = 1000
const dataSource: any = reactive({
    list: [],
    lists: [],
    retulist: [],
    fulllist: [],
    data: ""
})
const trees = ref<InstanceType<typeof ElTree>>()
const tree=(value:any,data:any)=>{
    if(!value) return true
    // console.log(data,value)
    return data.name.includes(value)
    
}
// watch(filterText, (val) => {
          
//     })
const inquire = async () => {
    trees.value!.filter(dataSource.data)
    // if (dataSource.data == '') {
    //         dataSource.list = dataSource.lists
    // } else {
    //     dataSource.retulist=[...dataSource.list[0].son.filter((item: any) => item.name.includes(dataSource.data))]
    //     console.log(dataSource.retulist)
    //     dataSource.list=dataSource.lists
    //     for (let i = 0; i <= dataSource.list[0].son.length - 1; i++) {
    //         dataSource.list = dataSource.list[0].son[i].son.filter((item: any) => item.name.includes(dataSource.data))
    //         dataSource.retulist=[...dataSource.retulist,...dataSource.list]
    //         dataSource.list=dataSource.retulist
    //         // dataSource.list = dataSource.list[0].son[i].son.son.filter((item: any) => item.name.includes(dataSource.data))
    //             // dataSource.list = dataSource.list[0].son[i].son[i].son.filter((item: any) => item.name.includes(dataSource.data))
    //             // console.log(dataSource.list)
    //             // if (dataSource.list[0].son[i].son[j].son.filter((item: any) => item.name.includes(dataSource.data)).length > 0) {

    //             // }
    //     }
    // }
}
const getlist = async () => {
    let res: any = await http.getcharlist()
    dataSource.list = res.data
    dataSource.lists = res.data
    console.log(res.data)
}
onMounted(() => {
    getlist()
})
const add = (val: any) => {
    router.push({ path: "/charts/line" })
}
const addchild = (val: any) => {
    console.log(val)
    router.push({
        path: "/charts/line", query: {
            parent_id: val.id
        }
    })
}
const emitadd = (data: any) => {
    router.push({
        name: "emitline",
        state: {
            params: {
                data: JSON.stringify(data)
            }
        }
    })
}
const defaultProps = {
    children: 'son',
    label: 'name'
}

const dele = async (val: any) => {
    if (val.son.length == 0) {
        ElMessageBox.confirm(
            '此操作将永久删除该数据, 是否继续?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                let res: any = await http.delhouse(val.id)
                if (res.code == 10000) {
                    getlist()
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消删除',
                })
            })
    } else {
        ElMessage({
            showClose: true,
            message: '有子部门不能删除'
        })
    }
}
</script>

<style scoped>
.top {
    margin: 0 10px;
    padding: 10px 0 20px;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    line-height: 35px;
}

:deep(.el-tree-node__content) {
    height: 35px;
}

.coustom-tree-button {
    position: absolute;
    right: 60%;
}
</style>